<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>新增服务站详情页</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="refresh" content="1200">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/dist/plugins/bootstrap/css/bootstrap.min.css">
    <!--字体-->
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <!--图标-->
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <!--OA主样式-->
    <link rel="stylesheet" href="/dist/css/OA.min.css?t=86e2297f">
    <link rel="stylesheet" href="/dist/css/skins/OA-skins.min.css?t=222aea35">
    <link rel="stylesheet" href="/dist/plugins/fixedTable/fixed-table.css"/>
    <style>
        .table > tbody > tr > td {
            height: 30px;
            max-height: 44px;
            padding: 0 2px;
        }

        td {
            position: relative;
        }

        .table .td-value span {
            line-height: 22px;
        }

        .saveModle .top {
            height: 34px;
            line-height: 34px;
            font-size: 14px;
            font-weight: bold;
            color: #333;
            padding-left: 7px;
            border-bottom: 1px solid #cfcfcf;
            background: #fff;
        }

        .biTian {
            position: absolute;
            color: red;
            margin-left: -10px;
            margin-top: 3px;
        }

        .saveModle .top .title {
            height: 32px;
            line-height: 32px;
            font-size: 14px;
            font-weight: bold;
            color: #333;
            float: left;
            background: #fff;
        }

        .saveModle .top .btn {
            font-size: 20px;
            width: 34px;
            height: 22px;
            line-height: 12px;
            display: inline-block;
            float: right;
        }

        .saveModle .top .btn:hover {
            color: red;
        }

        .saveModle .saveBtn {
            margin: 0 auto;
            margin-top: 35px;
            display: block;

        }

        span.lineOne {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
        }

        .lineOne span {
            max-height: 20px;
            line-height: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            text-align: left;
        }

        p {
            display: inline-block;
            margin-bottom: 0px;
            line-height: 25px;
            padding-right: 15px;
            color: #228bee;
            font-size: 14px;
        }

        .td-value span.lineOne {
            overflow: hidden;
            text-overflow: ellipsis;
            color: black !important;
            /*display: -webkit-box;*/
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            max-height: 34px;
        }

        .td-value {
            text-align: left !important;
            vertical-align: middle;
            word-wrap: break-word;
            color: #2a8cec !important;
        }

        td {
            height: 47.78px;
        }

        .td-value span {
            display: inline-block;
            overflow: hidden;
            padding-left: 0.06rem;
            word-wrap: break-word;
            color: black !important;
        }

        .div-td-content-more {
            position: absolute;
            height: auto;
            z-index: 999;
            line-height: 20px;
            background-color: #d3e8fd;
            padding: 8px 6px;
            border: 1px solid #e8e8ea;
            display: none;
        }

        .div-td-content-more i {
            width: 15px;
            height: 12px;
            background: url("/dist/img/more-icon.png");
            position: absolute;
            left: 50px;
            top: -12px;
        }

        .fixed-table_body tr td {
            border-right: none;
            font-size: 12px;
            text-align: center;
        }

        .fixed-table_header tr th {
            border-right: none;
            background: yellow;
            font-weight: normal;
            font-size: 12px;
        }

        .nav > li > a {
            padding: 10px 10px;
        }


        .nav-tabs-custom > .nav-tabs > li.active {
            color: #2a8cec;
        }

        .nav-tabs-custom > .nav-tabs > li.active > a, .nav-tabs-custom > .nav-tabs > li.active:hover > a {
            background: #fff;
            color: #2a8cec;
            border-top-left-radius: 0px;
            border-top-right-radius: 0px;
        }


        .nav-tabs-custom > .nav-tabs {
            /*border-bottom-color: #fff;*/
        }

        .model-picker-dropdown {
            position: absolute;
            width: 315px;
            left: -9999px;
            top: -9999px;
            outline: 0;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            z-index: 999999;
            display: none;
            min-width: 200px;
            margin-bottom: 20px;
            margin-top: 5px;
        }

        .model-select {
            font-size: 16px;
        }

        .model-select dl {
            line-height: 2;
            clear: both;
            padding: 3px 0;
            margin: 0;
            max-height: 200px;
            overflow-y: scroll;
        }

        .model-select-content {
            width: 100%;
            min-height: 50px;
            background-color: #fff;
            padding: 5px 5px;
        }

        .model-select a:hover,
        .model-select a:focus {
            background-color: #f1f8ff;
            border-radius: 2px;
            color: #46A4FF;
        }

        .model-select a.active {
            background-color: #46A4FF;
            color: #fff;
            border-radius: 2px;
        }

        .td-value span {
            padding-left: 6px;
        }

        textarea {
            height: 56px;
            width: 100%;
            border: none;
            outline: none;
            -webkit-appearance: none;
            resize: none;
            padding-top: 20px;
            padding-left: 20px;
        }

        .textareaSpan {
            max-height: 56px;
            line-height: 18px !important;
            overflow: hidden !important;
            text-overflow: ellipsis;
            display: -webkit-box !important;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
        }

        label {
            font-weight: normal;
            margin-bottom: 0px;
        }

        .td-title {
            width: 25%;
        }

        .user {
            height: 20px;
            line-height: 22px;
            max-height: 30px;
            float: left;
            text-align: left;
            min-width: 32px;
            padding-left: 1px;
            overflow: hidden;
            cursor: pointer;
        }

        .user:hover {
            background-color: #cfd4d1;
        }

        .userbox .select.user {
            color: #fff;
            background-color: #045B9E;
        }

        .wyui-autocomplete-panel {
            left: 0px !important;
        }
    </style>
</head>
<body>
<section id="app" style="text-align: center; height: auto;" v-cloak class="iframeH">
    <div class="div-td-content-more"><i></i></div>
    <div class="oaLoad">
        <div class="loadGif" id="areaProgress"></div>
    </div>
    <table class="table table-detail table-bordered text-center" cellspacing="0">
        <tbody>
        <tr>
            <td class="td-title">公司</td>
            <td class="td-value">
                <select v-model="params.companyId" class="form-control"
                        style="color: #2a8cec;font-size: 12px;padding-left: 0px;">
                    <option value="" selected="selected"></option>
                    <option v-for="company in companyList" v-bind:value="company.id">{{company.name}}</option>
                </select>
            </td>
        </tr>
        <tr>
            <td class="td-title">服务站</td>
            <td class="td-value">
                <input type="text" v-model="params.serveStation">
                <span v-else>{{params.serveStation}}</span>
            </td>
        </tr>
        <tr>
            <td class="td-title">人员</td>
            <td class="td-value">
                <div id="user" style="padding-left:6px;"
                     v-on:click.stop="inputFocus('txtCopier')">
                    <div v-for="(user,i) in copiers" class="user"
                         v-bind:class="{ select: copierSelectedIdx == i }"
                         v-on:click="selectUser(i,'copierSelectedIdx')">{{user.name}};
                    </div>
                    <input id="txtCopier" v-if="pageType=='edit'" type="text" class="pull-left copier"
                           style="width: 50px;height:22px;padding-top: 2px !important;padding-left: 1px !important;"
                           @keyup.delete="deleteUser">
                </div>
            </td>
        </tr>
        </tbody>
    </table>
    <div>
        <input type="button" value="确定" class="btn oaBtn  btn-sm" v-if="pageType == 'edit'" @click="save()">
    </div>

</section>
<!--JQ-->
<!--插件JS-->
<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<script>window.jQuery || document.write('<script src="/dist/plugins/jQuery/jquery-2.2.3.min.js"><\/script>', '<script src="/dist/plugins/bootstrap/js/bootstrap.min.js"><\/script>', '<script src="/dist/plugins/vue/vue.min.js"><\/script>')</script>
<script src="/dist/plugins/jQuery/jquery.cookie.min.js"></script>
<script src="https://file.ggxqce.com/web/bootstrap.min.js"></script>
<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<!--框架已定义 JS-->
<script src="/dist/js/app_iframe.js?t=8e743a31"></script>
<!--oa自定义  JS-->
<script src="/dist/js/oa.js?t=54c6b89c"></script>
<script type="text/javascript" src="/dist/plugins/My97DatePicker/WdatePicker.js"></script>
<!--<script type="text/javascript" src="/dist/plugins/lhgdialog/lhgdialog.min.js?self=true"></script>-->
<script src="/dist/plugins/fixedTable/fixed-table.js"></script>
<script type="text/javascript">
    var api = frameElement.api;
    $(function () {
        $("body").on("click", ".lineOne,.textareaSpan", function (e) {
            if ($(".div-td-content-more").is(":hidden")) {
                var text = $(this).text();
                if (text != "") {
                    text = "<i></i>" + text;
                    $(".div-td-content-more").html(text).css({
                        "width": $(this).outerWidth() + "px",
                        "left": $(this).offset().left,
                        "top": ($(this).offset().top + $(this).outerHeight()) + "px",
                        "text-align": "left",
                    }).show();
                    e.stopPropagation();
                }
            } else {
                $(".div-td-content-more").hide();
            }
        });
        $("body").on("click", ".div-td-content-more", function (e) {
            e.stopPropagation();
        });
        $("body").on("click", function () {
            $(".div-td-content-more").hide();
        });
    });
</script>
<script type="text/javascript">
    Vue.directive('onedate', {
        // 当被绑定的元素插入到 DOM 中时……
        update: function (el, binding) {
            // 聚焦元素
            if (app.pageType != 'add') {
                if (el.value == "NaN.undefined" || el.value == "") {
                    el.value = binding.value
                }
            }
        },
        componentUpdated: function (el, binding) {
            // 聚焦元素
        }
    })


    var app = new Vue({
        el: '#app',
        data: {
            pageType: $.wyui.page.urlParams.pageType ? $.wyui.page.urlParams.pageType : 'look',
            id: $.wyui.page.urlParams.mainId,
            itemsBran: [],
            itemsType: [],
            itemsMod: [],
            companyList: [],
            params: {
                id: '',
                companyId: '',
                serveStation: '',
            },
            copiers: [],
            copierSelectedIdx: -1,

        },

        methods: {
            getCompanyList: function () {
                var that = this;
                $.wyui.postMethod("/company/getCompanyList.json", {}, function (data) {
                    that.companyList = data;
                });
            },
            selectUser: function (i, prop) {
                this.copierSelectedIdx = -1;
                this[prop] = i;
            }
            ,
            inputFocus: function (id) {
                $("#" + id).focus();
            }
            ,
            deleteUser: function (event) {
                if (event.keyCode == 46 || event.keyCode == 8 && event.target.value == "") {
                    if (this.copierSelectedIdx > -1) {
                        this.copiers.splice(this.copierSelectedIdx, 1);
                        this.copierSelectedIdx = -1;
                    } else {
                        this.copierSelectedIdx = this.copiers.length - 1;
                    }
                }
            },
            save: function () {
                var that = this;
                var userIds = '';
                if (that.copiers && that.copiers.length > 0) {
                    for (var i = 0; i < that.copiers.length; i++) {
                        userIds += that.copiers[i].id + ',';
                    }
                }
                var data = {
                    id: that.params.id,
                    userIds: userIds,
                    serveStation: that.params.serveStation,
                    companyId: that.params.companyId,
                    createUserId: getCurrentUser().id,
                }
                $.wyui.postMethod('/serveStation/save.json', trimRN(data), function (r) {
                    alert("保存成功！");
                    top.refreshTabByName("服务站管理", "no");
                    api.close();
                });

            }
        },
        mounted: function () {
            var that = this;
            var id = $.wyui.page.urlParams.id;
            if ($.wyui.page.urlParams.id && $.wyui.page.urlParams.id != 0) {
                $.wyui.postMethod('/serveStation/getStationAcceptById.json', {staId: id}, function (r) {
                    that.params.companyId = r.companyId;
                    that.params.serveStation = r.serveStation;
                    that.copiers = r.result;
                    that.params.id = r.id;
                });
            }

            that.getCompanyList();
        },
    });

</script>
<script>
    $(function () {
        initAutoComplete();
    });

    function initAutoComplete() {
        $(".copier").autoComplete({
            url: server.ip + urlConfig.system.user.getTop10ByNameUser,
            render: function (users, panel) {
                for (var i = 0; i < users.length; i++) {
                    $("<li></li>").data("autoComplete",
                        users[i]).html("<a>" + users[i].name + "&nbsp;&nbsp;&nbsp;" +
                        "(" + "&nbsp;" + users[i].companyName + "-" + users[i].departName + "-" + users[i].roleName + "&nbsp;" + ") " + "</a>")
                        .appendTo(panel);
                }
            },
            selected: function (user) {
                if ($(this).hasClass("copier")) {
                    var userIds = new Array();
                    for (var i = 0; i < app.copiers.length; i++) {
                        userIds.push(app.copiers[i].userId);
                    }
                    if ($.inArray(user.id, userIds) == -1) {
                        app.copiers.push({id: user.id, name: user.name});
                    } else {
                        top.$.alert({
                            win: this,
                            height: 180,
                            width: 300,
                            icon: '3', //1成功 2失败 3提示 不穿代表无图标
                            title: "人员不能重复输入",
                            content: '',

                            blankclose: true,//点击空白是否可关闭
                            ok: "确定"
                        })
                    }
                    $(this).val("");
                }
                return false;
            },
            height: 210,
            width: 300
        });
    }

</script>
</body>
</html>